<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <view class="container">
    <tui-swipe-action :actions="actions" :key="index" :params="item"
                      @click="handlerButton" v-for="(item,index) in dataList">
      <template v-slot:content>
        <view class="list-item">
          <!-- <image :src="'../../../static/images/news/'+item.img+'.jpg'" class="item-img"></image> -->
          <view class="item-box">
            <view class="item-title">报修类型：{{item.repaireName}}</view>
            <view class="item-title">报修地点：{{item.buildingDetailName}}</view>
            <view class="item-title">房间号：{{item.roomNum}}</view>
            <view class="item-title">

              <p v-if="item.repaireStatus=='0'">
                报修状态：
                未维修
              </p>
              <p v-else-if="item.repaireStatus=='1'">
                报修状态：
                维修中
              </p>
              <p v-else-if="item.repaireStatus=='2'">
                报修状态：
                维修完成
              </p>
            </view>
            <view class="item-time">报修时间：{{item.repaireTime}}</view>
          </view>
        </view>
      </template>
    </tui-swipe-action>
  </view>
</template>

<script>
  import tuiSwipeAction from "@/components/swipe-action/swipe-action"
  import { tenancyList } from '@/api/user/index.js'

  export default {
    components: {
      tuiSwipeAction
    },
    name: 'swipe-action',
    data() {
      return {
        dataList: [],
		page: {
		  current: 1,
		  size: 8,
		  total: 0
		},
        actions: [
          {
            name: '详情',
            color: '#fff',
            fontsize: 30,
            width: 80,
            //icon: 'like.png',//此处为图片地址
            background: '#ff7900'
          }
        ]
      }
    },
	onLoad() {
	  this.init()
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh: function () {
	  this.init();
	},
	/**
	 * 上拉加载
	 */
	onReachBottom: function () {
	  if (this.loadingType != 'noMore') {
	    this.getMoreData();
	  }
	},
    methods: {
      handlerButton(e) {
        let index = e.index;
        console.log("index",index)
        let item = e.item;
        let menuTxt = ["详情"][index];
        if (index==0){
            uni.navigateTo({
                url: `/pages/user/orderDetail/orderDetail?rid=${item.rid}`,
                animationType: 'pop-in',
                animationDuration: 300
            });
        }
        // this.tui.toast("您点击了【" + menuTxt + "】按钮，列表id：" + item.id);
      },
	  init() {
	    this.page.current = 1
	    this.page.size = 8
	    this.loadingType = 'loading'
	    tenancyList(this.page).then(res => {
	        console.log('res', res)
	        this.dataList = res.data.records
            console.log('dataList',this.dataList)
	      this.page.total = res.data.total
	        if(this.page.size < this.page.total) {
	          this.loadingType = 'more'
	        }else {
	          this.loadingType = 'noMore'
	        }
	    })
	  },
        getMoreData() {
            let that = this;
            if (this.loadingType !== 'more') {
                return false;
            }
            this.loadingType = 'loading';
            uni.showLoading({
                title: '加载中'
            });
            this.page.current++;
            tenancyList(this.page).then(res => {
                if (res.data.code === 0) {
                    if (res.data.records == null) {
                        that.loadingType = 'noMore';
                        uni.hideLoading();
                        return;
                    } else if (that.page.total < that.page.current * that.page.size) {
                        that.dataList = that.dataList.concat(res.data.records);
                        that.loadingType = 'noMore';
                        console.log(that.loadingType);
                        uni.hideLoading();
                        return;
                    }
                }
                that.dataList = that.dataList.concat(res.data.records);
                that.loadingType = 'more';
                uni.hideLoading();
            });
        },
    }
  }
</script>

<style lang="css" scoped>
  @import "swipe-action.css";
</style>
